home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap23 / dun23_1.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  5.2 KB  |  141 lines
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Playing With The Layers Array</title>
  6.  
  7. </head>
  8.  
  9. <script language="JavaScript1.2">
  10.  
  11. <!--//
  12.  
  13.  
  14.  
  15. var currentLayer;
  16.  
  17.  
  18.  
  19. //-------loadLayer function--------
  20.  
  21. //this function populates a <select> input box with the array of layers on the page...
  22.  
  23.  
  24.  
  25. function loadLayers(obj) {
  26.  
  27.   var n = 0;
  28.  
  29.   var el;
  30.  
  31.   for(n=1;n<document.layers.length;n++) {
  32.  
  33.       el = new Option('document.layers[' + n + ']', n);
  34.  
  35.       obj.mylayers.options[n] = el;
  36.  
  37.   }
  38.  
  39. }
  40.  
  41.  
  42.  
  43. //-------getLayer function--------
  44.  
  45. //if you've selected a layer from the select list (mylayers) this function populates
  46.  
  47. //the form with information about the layer, then moves the layer into the table
  48.  
  49. //for your inspection and manipulation...
  50.  
  51.  
  52.  
  53. function getLayer(obj) {
  54.  
  55.    if (obj.mylayers.selectedIndex > 0) {
  56.  
  57.       var selLayer = obj.mylayers.options[obj.mylayers.selectedIndex].value;
  58.  
  59.       if ((currentLayer != selLayer) && (currentLayer)) {
  60.  
  61.           document.layers[currentLayer].left = (20 + ((currentLayer -1) * 40));
  62.  
  63.           document.layers[currentLayer].top = 10;
  64.  
  65.           document.layers[currentLayer].width = 40;
  66.  
  67.       }
  68.  
  69.       currentLayer = selLayer;
  70.  
  71.       document.layers[currentLayer].left = 380;
  72.  
  73.       document.layers[currentLayer].top = 113;
  74.  
  75.       obj.layername.value = document.layers[currentLayer].id;
  76.  
  77.    } else {
  78.  
  79.       alert('No Layer Selected!');
  80.  
  81.    }
  82.  
  83. }
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91. //-------getValue function--------
  92.  
  93. //if you're looking at a layer, the JavaScript statement in the control box has a
  94.  
  95. //dropdown list of several layer properties.  Selecting one of them will auto-fill
  96.  
  97. //that attribute's property in the form...
  98.  
  99.  
  100.  
  101. function getValue(obj) {
  102.  
  103.       if (currentLayer) {
  104.  
  105.           var gv = obj.att.options[obj.att.options.selectedIndex].value
  106.  
  107.           var cl = document.layers[currentLayer]
  108.  
  109.           if (gv == 'top') obj.setting.value = cl.top;
  110.  
  111.           if (gv == 'left') obj.setting.value = cl.left;
  112.  
  113.           if (gv == 'visibility') obj.setting.value = cl.visibility;
  114.  
  115.           if (gv == 'src') obj.setting.value = cl.src;
  116.  
  117.       } else {
  118.  
  119.           alert('No Layer Was Selected!');
  120.  
  121.       }
  122.  
  123. }
  124.  
  125.  
  126.  
  127. //-------resetLayers function--------
  128.  
  129. //this just clears the form, and moves all layers back to their original positions...
  130.  
  131.  
  132.  
  133. function resetLayers(obj) {
  134.  
  135.    if (currentLayer) {
  136.  
  137.           document.layers[currentLayer].left = (20 + ((currentLayer -1) * 40));
  138.  
  139.           document.layers[currentLayer].top = 10;
  140.  
  141.           document.layers[currentLayer].width = 40;
  142.  
  143.           currentLayer = null;
  144.  
  145.           obj.layername.value = '';
  146.  
  147.           obj.setting.value = '';
  148.  
  149.           obj.att.options[0].selected = true;
  150.  
  151.    } else {
  152.  
  153.       alert('No Active Layer Selected!');
  154.  
  155.    }
  156.  
  157. }
  158.  
  159.  
  160.  
  161. //-------setValue function--------
  162.  
  163. //once you're viewing a layer, and have selected an attribute, you can change its value
  164.  
  165. //and click the 'set' button to assign that value to the selected property.  Keep in mind
  166.  
  167. //that the page is showing the actual JavaScript syntax that could be run to control that
  168.  
  169. //selected layer...
  170.  
  171.  
  172.  
  173. function setValue(obj) {
  174.  
  175.       if ((currentLayer) && (obj.setting.value != '')){
  176.  
  177.           var gv = obj.att.options[obj.att.options.selectedIndex].value;
  178.  
  179.           var cl = document.layers[currentLayer];
  180.  
  181.           if (gv == 'top') cl.top = obj.setting.value;
  182.  
  183.           if (gv == 'left') cl.left = obj.setting.value;
  184.  
  185.           if (gv == 'visibility') cl.visibility = obj.setting.value;
  186.  
  187.           if (gv == 'src') cl.src = obj.setting.value;
  188.  
  189.       } else {
  190.  
  191.           alert('No Layer or Attribute Was Selected!');
  192.  
  193.       }
  194.  
  195. }
  196.  
  197.  
  198.  
  199. //-->
  200.  
  201. </script>
  202.  
  203. <body bgcolor="white">
  204.  
  205. <layer z-index=1 id="redblock" width=40 bgcolor="red" top=10 left=20><h1>[1]</h1></layer>
  206.  
  207. <layer z-index=2 id="blueblock" width=40 bgcolor="blue" top=10 left=60><h1>[2]</h1></layer>
  208.  
  209. <layer z-index=3 id="silverblock" width=40 bgcolor="silver" top=10 left=100><h1>[3]</h1></layer>
  210.  
  211. <layer z-index=4 id="yellowblock" width=40 bgcolor="yellow" top=10 left=140><h1>[4]</h1></layer>
  212.  
  213. <layer z-index=5 id="greenblock" width=40 bgcolor="green" top=10 left=180><h1>[5]</h1></layer>
  214.  
  215. <layer z-index=0 name="control" width=550 height=70 left=20 top=65>
  216.  
  217. <form>
  218.  
  219. <table width=550>
  220.  
  221. <tr><td colspan=3 align=center>
  222.  
  223. <b>Control Center</b> ( document.layers[0] )
  224.  
  225. </td></tr>
  226.  
  227. <tr><td valign=top width=150>
  228.  
  229. <select name="mylayers" size=6>
  230.  
  231. <option value="">----Layers Array----
  232.  
  233. </select>
  234.  
  235. </td><td valign=middle align=center width=100>
  236.  
  237. <input type="button" value="Load Array" onClick="loadLayers(this.form)">
  238.  
  239. <input type="button" value="Properties " onClick="getLayer(this.form)">
  240.  
  241. <input type="button" value="    Reset   " onClick="resetLayers(this.form)">
  242.  
  243. </td><td bgcolor="black" width=250>
  244.  
  245.  
  246.  
  247. </td></tr>
  248.  
  249. <tr><td align=center valign=top colspan=3 width=500>
  250.  
  251. <br>
  252.  
  253. <tt>document.layers['<input type="text" name="layername"
  254.  
  255.    size=12>']</tt>.<select name="att" onChange="getValue(this.form)">
  256.  
  257. <option value="">
  258.  
  259. <option value="top">top
  260.  
  261. <option value="left">left
  262.  
  263. <option value="visibility">visibility
  264.  
  265. <option value="src">src
  266.  
  267. </select> = <input type="text" size=15 name="setting">
  268.  
  269. <input type=button value="set" onClick="setValue(this.form)"><br>
  270.  
  271. </table>
  272.  
  273. </form>
  274.  
  275. </layer>
  276.  
  277. </body>
  278.  
  279. </html>
  280.  
  281.